<html><body><style>.tool {
  display: block !important;
  box-sizing: border-box;
  position: relative;
  margin: 0;
  padding: 0;
  width: 25px;
  height: 25px;
  border: 0;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  background: transparent;
  outline: 0; 
}
  .tool.tool--selected {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    padding-bottom: 2px;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    background: url("") repeat; 
  }
  .tool:before {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    content: ' ';
    z-index: 1;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid #7b7b7b;
    border-bottom: 1px solid #7b7b7b; }

  .tool.tool--selected:before {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-top: 1px solid #7b7b7b;
    border-left: 1px solid #7b7b7b;
    border-right: 1px solid #bdbdbd;
    border-bottom: 1px solid #bdbdbd; }
</style><div class="tool">btn</div>
<div class="tool.tool--selected">btn</div>
</body></html>